<template>
    <div>
        <ul> 
            <!-- 动态组件，就是多个组件使用同一个挂载点 -->
            <li @click="com='Demo1'" class="red">本周爆款</li>  
            <li @click="com='Demo2'">顶级腕表</li>
            <li @click="com='Demo3'">顶级设计</li>
            <li @click="com='Demo4'">人气大牌</li>
            <li @click="com='Demo5'">硬汉最爱</li>       
        </ul>
         <keep-alive>
                <component :is="com"></component>
            </keep-alive>
    </div>
</template>

<script>
import Demo1 from "@/components/details/demo1.vue"
import Demo2 from "@/components/details/demo2.vue"
import Demo3 from "@/components/details/demo3.vue"
import Demo4 from "@/components/details/demo4.vue"
import Demo5 from "@/components/details/demo5.vue"
export default {
  
    data(){
        return{
            com:"Demo1"
        }
    },
    components:{
        Demo1,
        Demo2,
        Demo3,
        Demo4,
        Demo5
    }
}
</script>

<style lang="scss" scoped>
    ul{
        height: 0.6rem;
        margin-top: 0.5rem;
         display: flex;
         white-space: nowrap;
        border-top: 1px solid #ddd;
        background-color: #fff;
         position: fixed;
        top:0rem;
        overflow-x: auto;
        li{
            height: 0.4rem;
            list-style: none;
            line-height: 0.4rem;
            text-align: center;
            font-size: 0.14rem;
            color: #666;
            margin-right: 0.3rem;
        }
    }
    .red{
        color: #ccaa7a;
    }
</style>